﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>FooTable - jQuery plugin for responsive HTML tables</title>
  <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
  <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script>
    if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
  </script>
  <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
  <script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
  <script src="js/bootstrap-tab.js" type="text/javascript"></script>
  <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
<div class="demo-container">
  <ul class="breadcrumb">
    <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
    <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
    <li class="active">Filtering</li>
  </ul>
  <div class="alert">
    Easily filter your FooTables
  </div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#demo">Demo</a></li>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#docs">Docs</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="demo">
      <p>
        Search: <input id="filter" type="text"/>
        Status: <select class="filter-status">
        <option></option>
        <option value="active">Active</option>
        <option value="disabled">Disabled</option>
        <option value="suspended">Suspended</option>
      </select>
        <a href="#clear" class="clear-filter" title="clear filter">[clear]</a>
        <a href="#api" class="filter-api" title="Filter using the Filter API">[filter API]</a>
      </p>
      <table class="table demo" data-filter="#filter" data-filter-text-only="true">
        <thead>
        <tr>
          <th data-toggle="true">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone,tablet">
            Job Title
          </th>
          <th data-hide="phone,tablet">
            DOB
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>Isidra</td>
          <td><a href="#">Boudreaux</a></td>
          <td>Traffic Court Referee</td>
          <td data-value="78025368997">22 Jun 1972</td>
          <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
        </tr>
        <tr>
          <td>Shona</td>
          <td>Woldt</td>
          <td><a href="#">Airline Transport Pilot</a></td>
          <td data-value="370961043292">3 Oct 1981</td>
          <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
        </tr>
        <tr>
          <td>Granville</td>
          <td>Leonardo</td>
          <td>Business Services Sales Representative</td>
          <td data-value="-22133780420">19 Apr 1969</td>
          <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
        </tr>
        <tr>
          <td>Easer</td>
          <td>Dragoo</td>
          <td>Drywall Stripper</td>
          <td data-value="250833505574">13 Dec 1977</td>
          <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
        </tr>
        <tr>
          <td>Maple</td>
          <td>Halladay</td>
          <td>Aviation Tactical Readiness Officer</td>
          <td data-value="694116650726">30 Dec 1991</td>
          <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
        </tr>
        <tr>
          <td>Maxine</td>
          <td><a href="#">Woldt</a></td>
          <td><a href="#">Business Services Sales Representative</a></td>
          <td data-value="561440464855">17 Oct 1987</td>
          <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
        </tr>
        <tr>
          <td>Lorraine</td>
          <td>Mcgaughy</td>
          <td>Hemodialysis Technician</td>
          <td data-value="437400551390">11 Nov 1983</td>
          <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
        </tr>
        <tr>
          <td>Lizzee</td>
          <td><a href="#">Goodlow</a></td>
          <td>Technical Services Librarian</td>
          <td data-value="-257733999319">1 Nov 1961</td>
          <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
        </tr>
        <tr>
          <td>Judi</td>
          <td>Badgett</td>
          <td>Electrical Lineworker</td>
          <td data-value="362134712000">23 Jun 1981</td>
          <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
        </tr>
        <tr>
          <td>Lauri</td>
          <td>Hyland</td>
          <td>Blackjack Supervisor</td>
          <td data-value="500874333932">15 Nov 1985</td>
          <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tab-pane" id="setup">
      <p>
        Check out the <a href="getting-started.htm#setup">getting started</a> demo to see how to setup FooTable.
      </p>
      <h4>Include Filtering Add-On</h4>

      <p>You simply need to include the sorting add-on javascript file to make your table filterable:</p>
      <pre>&lt;script src=&quot;path_to_your_js/footable.filter.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
    </div>
    <div class="tab-pane" id="docs">
      <h4>Filtering</h4>

      <p>Add a text input field to your page, and then tell your FooTable to "watch" it by supplying a data attribute <code>data-filter=#filter</code> on your table element. Where <code>#filter</code>
        is the selector for the input field.</p>
      <h4>Filtering Options</h4>

      <p>You can define the minimum number of characters needed before the table data is filtered. Set a <code>data-filter-minimum="3"</code> on your table element. (default is 2)</p>

      <p>You can define the timeout for the delay before the table data is filtered. Set a <code>data-filter-timeout="500"</code> on your table element. (default is 300)</p>

      <p>You can force FooTable to only filter by the cell text and ignore any data-values by setting <code>data-filter-text-only="true"</code> on your table element.</p>
      <h4>Advanced Filtering</h4>

      <p>As you can see in the source of this demo, you do not need to only rely on a text input field to filter. You can "trigger" a custom filter:
      <pre>$(&#39;table&#39;).trigger(&#39;footable_filter&#39;, {filter: &quot;bob&quot;});</pre>
      </p>
      <p>You can also clear the filter with a "trigger":
      <pre>$(&#39;table&#39;).trigger(&#39;footable_clear_filter&#39;);</pre>
      </p>
      <h4>Filtering API</h4>

      <p>You can also programmatically filter your table:</p>
                <pre>
$(&#39;.filter-api&#39;).click(function (e) {
    e.preventDefault();

    //get the footable filter object
    var footableFilter = $(&#39;table&#39;).data(&#39;footable-filter&#39;);

    alert(&#39;about to filter table by &quot;tech&quot;&#39;);
    //filter by &#39;tech&#39;
    footableFilter.filter(&#39;tech&#39;);

    //clear the filter
    if (confirm(&#39;clear filter now?&#39;)) {
        footableFilter.clearFilter();
    }
});</pre>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function () {
    $('table').footable().bind('footable_filtering', function (e) {
      var selected = $('.filter-status').find(':selected').text();
      if (selected && selected.length > 0) {
        e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
        e.clear = !e.filter;
      }
    });

    $('.clear-filter').click(function (e) {
      e.preventDefault();
      $('.filter-status').val('');
      $('table.demo').trigger('footable_clear_filter');
    });

    $('.filter-status').change(function (e) {
      e.preventDefault();
      $('table.demo').trigger('footable_filter', {filter: $('#filter').val()});
    });

    $('.filter-api').click(function (e) {
      e.preventDefault();

      //get the footable filter object
      var footableFilter = $('table').data('footable-filter');

      alert('about to filter table by "tech"');
      //filter by 'tech'
      footableFilter.filter('tech');

      //clear the filter
      if (confirm('clear filter now?')) {
        footableFilter.clearFilter();
      }
    });
  });
</script>
</body>
</html>
